<!DOCTYPE html>
<html>
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta charset="utf-8">
    <meta name="renderer" content=webkit>
    <!-- 引入vue -->
    <script src="../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../js/jQyery.js"></script>
    <script src="../js/layer/layer.js"></script>

    <script src="../js/element/element.js"></script>
    <script src="../js/new.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../js/element/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/maincontent.css">
    <link rel="stylesheet" href="../css/newmain.css">
    <link rel="stylesheet" href="../font/iconfont.css">

</head>
<style>
    [v-cloak]{
        display: none;
    }
</style>
<body>
<div class="index_main"  onclick="hidediaolog()">
    <div class="index_mainhead" id="app" v-cloak >
        <div class="imh_left">
            <img class="index_logo" src="../img/logowhite.png">
            <el-tooltip class="item" effect="light" content="折叠" placement="right" v-if="!isCollapse" >
                <img class="index_action" src="../img/logonext.png" v-on:click="changemenu">
            </el-tooltip>

            <el-tooltip class="item" effect="light" content="展开" placement="right" v-if="isCollapse">
                <img class="index_action"  src="../img/right.png" v-on:click="changemenu">
            </el-tooltip>

        </div>
        <div class="imh_right">
            <div class="right_notice" v-on:click.stop="shownoticedialog">
                <el-badge :value="12" :max="99" class="item">
                    <img class="right_noticeimg" src="../img/jinbao.png">
                </el-badge>
                <div class="noticelist" v-if="shownotice">
                    <div class="noticediv">
                        <img src="../img/yiji.png">
                        <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                    </div>
                    <div class="noticediv">
                        <img src="../img/erji.png">
                        <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                    </div>
                    <div class="noticediv">
                        <img src="../img/sanji.png">
                        <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                    </div>
                    <div class="noticediv">
                        <img src="../img/yiji.png">
                        <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                    </div>
                    <div class="noticediv">
                        <img src="../img/erji.png">
                        <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                    </div>
                    <div class="noticediv">
                        <img src="../img/sanji.png">
                        <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                    </div>
                    <div class="noticebottom">
                        <span>点击查看更多</span>
                    </div>
                </div>
            </div>
            <div class="title_rightdiv" v-on:click.stop="showlangdialog">
                <img :src="langinfo.img">
                <span style="margin-left: 0.1rem;color: #fff">{{langinfo.name}}</span>
                <img src="../img/xlwhite.png" style="margin-left: 0.05rem;">
            </div>
            <div class="head_line">

            </div>
            <div class="head_loginout">
                <img src="../img/tuichu.png">
            </div>
        </div>

        <div class="changelang" v-if="showlang" style="right: 0.14rem;top: 0.86rem">
            <template v-for="item in langlist">
                <div class="landiv" :class="{choselandiv:item.img===langinfo.img}" v-on:click="chosethis(item)">
                    <img :src="item.img">
                    <span>{{item.name}}</span>
                </div>
            </template>

        </div>
    </div>
    <div class="index_maincontent">
        <div class="imc_left" id="meun" v-cloak>
            <div class="imc_userinfo" v-on:click.stop="showuserinfoactiondialog" v-if="!isCollapse">
                <div class="userimg">
                    <img src="../img/tx.png">
                </div>
                <div class="userinfo" >
                    <div class="usertitle">
                        <span>智棚物联网</span>
                    </div>
                    <div class="userdesc">
                        <span>管理员</span>
                    </div>
                </div>

                <div class="userinfoaction" v-if="showuserinfoaction">
                    <div class="actionimg">
                        <img src="../img/sanjiao.png">
                    </div>
                    <div class="actionlist">
                        <div class="actiondiv">
                            <span>基本资料</span>
                        </div>
                        <div class="actiondiv">
                            <span>修改密码</span>
                        </div>
                        <div class="actiondiv">
                            <span>退出</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="indexmenu">
                <el-menu
                        ref="menu"
                        default-active="1"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        :collapse="isCollapse"
                        background-color="#1A2F70"
                        text-color="#dfdfdf"
                        :unique-opened="true"
                        :collapse-transition="false">
                    <el-menu-item index="2" v-on:click="hidefarmlist">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-grid"></i>
                            <span>农场列表</span>
                        </template>
                        <el-menu-item-group class="seconditem" style="background: #253C82">
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                            <el-menu-item index="1-3">选项3</el-menu-item>
                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item class="thirditem" index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-menu-item-group>




                    </el-submenu>

                    <el-menu-item index="3" v-on:click="hidefarmlist">
                        <i class="el-icon-s-platform"></i>
                        <span slot="title">智能场景</span>
                    </el-menu-item>
                    <el-menu-item index="4" v-on:click="hidefarmlist">
                        <i class="el-icon-s-order"></i>
                        <span slot="title">智棚服务</span>
                    </el-menu-item>
                </el-menu>
            </div>

        </div>
        <div class="imc_right" id="content" v-cloak>
            <div class="imc_righthead">
                <span>首页</span>
            </div>
            <div class="mainright_content">
                <div class="fc_maindiv">
                    <div class="fc_maindivhead">
                        <div class="fchead_left">
                            <div class="hoverdiv">
                                <div class="fcleft_div fcleft_sy"  style="background: #00B43E">
                                    <div class="fcldiv_left">
                                        <div class="fcldl_title">
                                            <span>施肥管理</span>
                                        </div>
                                        <div class="fcldl_desc">
                                            <span>Fertilization management</span>
                                        </div>
                                    </div>
                                    <div class="fcldiv_right">
                                        <img src="../img/xmkz.png">
                                    </div>

                                </div>
                            </div>
                            <div class="hoverdiv">
                                <div class="fcleft_div" style="background: #6470E8">
                                    <div class="fcldiv_left">
                                        <div class="fcldl_title">
                                            <span>灌溉管理</span>
                                        </div>
                                        <div class="fcldl_desc">
                                            <span>Irrigation management</span>
                                        </div>
                                    </div>
                                    <!--<div class="fcldiv_right">
                                        <img src="../img/xmkz.png">
                                    </div>-->
                                </div>
                            </div>
                            <div class="hoverdiv">
                                <div class="fcleft_div" style="background: #FB8B8B">
                                    <div class="fcldiv_left">
                                        <div class="fcldl_title">
                                            <span>传感数据</span>
                                        </div>
                                        <div class="fcldl_desc">
                                            <span>Sensing data</span>
                                        </div>
                                    </div>
                                    <div class="fcldiv_right">
                                        <img src="../img/cgq.png">
                                    </div>
                                </div>
                            </div>
                            <div class="hoverdiv">
                                <div class="fcleft_div" style="background: #1B8CE4;">
                                    <div class="fcldiv_left">
                                        <div class="fcldl_title">
                                            <span>系统报警</span>
                                        </div>
                                        <div class="fcldl_desc">
                                            <span>System alarm</span>
                                        </div>
                                    </div>
                                    <div class="fcldiv_right">
                                        <img src="../img/spjk.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="fc_maindivcontent">
                        <div class="flexBox">
                            <div style="flex: 1" class="currencyBox waterSupplyBox">
                                <div class="currency_title"><span class="iconfont">&#xe702;</span>供水罐</div>
                                <el-row type="flex" class="row-bg" justify="center">
                                    <el-col :span="10">
                                        <div class="waterTank_bg waterTank">
                                            <h5>{{ waterTankTitle }}</h5>
                                            <div class="waterSupplyTextBox clearfix">
                                                <span v-for="(item,index) in waterTankText" :key="index" class="waterSupplyText">{{item.title}}:{{item.value}}</span>
                                            </div>
                                        </div>
                                        <div class="warningText">警告：{{waterTankWarning}}</div>
                                    </el-col>
                                    <el-col :span="10">
                                        <div class="returnWaterTank_bg returnWaterTank">
                                            <h5>{{ returnWaterTankTitle }}</h5>
                                            <div class="waterSupplyTextBox clearfix">
                                                <span v-for="(item,index) in returnWaterTankText" :key="index" class="waterSupplyText">{{item.title}}:{{item.value}}</span>
                                            </div>
                                        </div>
                                        <div class="warningText">警告：{{returnWaterTankWarning}}</div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div style="flex: 1" class="currencyBox mixingBox">
                                <div  class="mixingEditBtn" @click="mixingEditBtn"><span class="iconfont" style="color: #409EFF">&#xe607;</span></div>
                                <div class="currency_title"><span class="iconfont">&#xe62f;</span>混合阀</div>
                                <div class="flexBox mixingDetailBox">
                                    <div style="flex: 1.5;margin-right: 0.2rem">
                                        <div class="mixing_img"><img src="../img/mixing_img.png"></div>
                                    </div>
                                    <div style="flex: 1" class="mixingTextBox">
                                        <div v-for="(item,index) in mixingText" :key="index" class="mixingText">{{item.title}}:{{item.value}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div  class="currencyBox motherLiquorBox">
                            <div class="currency_title"><span class="iconfont">&#xe6d2;</span>母液罐</div>
                            <div class="flexBox">
                                <div style="flex: 1" v-for="(item,index) in motherLiquorText" :key="index" class="motherLiquorTextBox">
                                    <div class="motherLiquorNo">{{ item.id }}</div>
                                    <div class="motherLiquor_img">
                                        <div class="motherLiquorText">
                                            <div>EC:{{ item.EC }}</div>
                                            <div>PH:{{ item.PH }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div  class="currencyBox fertilizeBox">
                            <div class="currency_title"><span class="iconfont">&#xe632;</span>施肥机</div>
                            <div class="flexBox" style="padding: 0 0.45rem 0 0.2rem;">
                                <div style="flex: 0.6" class="fertilizeWarning">
                                    <div class="currency_title fertilizeWarning_title"><span class="iconfont">&#xe688;</span>警报</div>
                                    <ul class="fertilizeWarning_Text">
                                        <li  v-for="(item,index) in fertilizeWarningText" :key="index">
                                            {{item.text}}
                                        </li>
                                    </ul>
                                </div>
                                <div style="flex: 1" class="fertilize_img"><img :src="fertilizeImg"></div>
                                <div style="flex: 2" class="fertilizeTextBox flexBox">
                                    <div v-for="(item,index) in fertilizeTextType" :key="index" style="flex: 1" class="fertilizeText">
                                        <div class="fertilizeTextTitle">
                                            <span></span>
                                            {{ item.title }}
                                        </div>
                                        <div class="flexBox" style="padding: 0.05rem 0 0.05rem 0.17rem;width: 97%">
                                            <div v-for="(i,index) in item.value" :key="index" style="flex: 1">
                                                <div>EC:{{ i.EC }}</div>
                                                <div>PH:{{ i.PH }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="flex: 1" class="fertilize_start">
                                        <div class="fertilize_start_title">启动</div>
                                        <div class="fertilize_start_img"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div  class="currencyBox fatWaterTankBox waterSupplyBox">
                            <div class="currency_title"><span class="iconfont">&#xe702;</span>肥水罐</div>
                            <div class="flexBox">
                                <div style="flex: 1" v-for="(item,index) in fatWaterTankText" :key="index" class="fatWaterTankText">
                                    <div class="returnWaterTank_bg returnWaterTank fatWaterTank_text">
                                        <h5>{{ item.title }}</h5>
                                        <div class="waterSupplyTextBox clearfix">
                                            <span v-for="(i,index) in item.value" :key="index" class="waterSupplyText">{{i.title}}:{{i.value}}</span>
                                        </div>
                                        <div class="fatWaterTankEdit"><span class="iconfont" style="color: #409EFF">&#xe607;</span></div>
                                    </div>
                                    <div v-if="item.state === '手动施肥'" class="manualFertilize fertilizeBtn">{{ item.state }}</div>
                                    <div v-else-if="item.state === '停止施肥'" class="stopFertilize fertilizeBtn">{{ item.state }}</div>
                                    <div v-else-if="item.state === '自动施肥'" class="autoFertilize fertilizeBtn">{{ item.state }}</div>
                                </div>
                            </div>
                        </div>
                        <div  class="currencyBox formulationSettingBox">
                            <div  class="formulationSettingAddBtn" @click="formulationSettingAddBtn"><span class="iconfont" style="color: #409EFF">&#xe6c7;</span></div>
                            <div class="currency_title"><span class="iconfont">&#xe69e;</span>配方设定</div>
                            <div class="formulationSettingTextBox clearfix">
                                <div v-for="(item,index) in formulationSettingText" :key="index" class="formulationSettingText">
                                    <div class="formulationSettingIcn"><span class="iconfont" style="color: #87B2DC">&#xe609;</span></div>
                                    <div class="formulationSetting_text clearfix">
                                        <span class="formulationSetting_name" style="float: left">{{ item.name }}</span>
                                        <span style="float: left;display: inline-block">EC:{{ item.EC }}</span>
                                        <span style="float: left;display: inline-block">PH:{{ item.PH }}</span>
                                    </div>
                                    <div  class="formulationSettingEditBtn" @click="formulationSettingEditBtn"><span class="iconfont" style="color: #409EFF">&#xe607;</span></div>
                                </div>
                            </div>
                        </div>
                        <!--<div class="datalistcontent">
                        </div>-->
                    </div>
                </div>
            </div>


        </div>
    </div>

</div>
</body>

</html>
<script>
    var headvue=new Vue({
        el: '#app',
        data(){
            return {
                langinfo:{
                    name:"简体中文",
                    img:'../img/cn.png'
                },
                showlang:false,
                shownotice:false,
                isCollapse:false,
                langlist:[
                    {
                        img:'../img/cn.png',
                        name:'简体中文'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },

                ],







            }
        },
        computed: {

        },
        created() {

        },
        mounted(){



        },
        methods:{

            showlangdialog(){
                this.showlang=!this.showlang;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            hidediaolog(){
                this.showlang=false;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            showuserinfoactiondialog(){
                this.showuserinfoaction=!this.showuserinfoaction;
                this.shownotice=false;
                this.showlang=false;
            },
            chosethis(item){
                this.langinfo=item
                this.showlang=false;
            },
            shownoticedialog(){
                this.shownotice=!this.shownotice;
                this.showlang=false;
                this.showuserinfoaction=false


            },
            changemenu(){
                this.isCollapse=!this.isCollapse
                if(this.isCollapse){
                    $(".el-submenu__title span").hide();
                    $(".el-menu-item span").hide();
                    $(".el-submenu__title i").eq(1).hide();
                    $(".imc_left").css({"width":"auto","min-width":"auto"})
                    $(".indexmenu").css("height","100%")

                }
                else{
                    $(".imc_left").css({"width":"2.6rem","min-width":"200px"})
                    $(".indexmenu").css("height","calc(100% - 0.96rem)")
                }
            },
        },
        watch:{
            isCollapse(){
                meun.isCollapse=this.isCollapse
            }
        }
    })
    var meun=new Vue({
        el: '#meun',
        data(){
            return {
                showuserinfoaction:false,
                isCollapse:false,
            }
        },
        computed: {

        },
        created() {

        },
        mounted(){



        },
        methods:{

            hidediaolog(){
                this.showlang=false;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            showuserinfoactiondialog(){
                this.showuserinfoaction=!this.showuserinfoaction;
                this.shownotice=false;
                this.showlang=false;
            },


            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },


            hidefarmlist(){
                this.$refs["menu"].close("1")
            },

        }
    })
    var content=new Vue({
        el: '#content',
        data(){
            return {
                formulationSetting_Select:false,
                waterTankTitle:'清水罐',
                returnWaterTankTitle:'回水罐',
                waterTankWarning:'清水液位低于设定值',
                returnWaterTankWarning:'回水液位低于设定值',
                fertilizeImg:'../img/fertilizeImg.png',
                formulationSettingText:[{
                    name:'番茄配方番茄配方',
                    EC:'1.21',
                    PH:'5.6'
                },{
                    name:'番茄配方',
                    EC:'1.21',
                    PH:'5.6'
                },{
                    name:'番茄配方',
                    EC:'1.21',
                    PH:'5.6'
                },{
                    name:'番茄配方',
                    EC:'1.21',
                    PH:'5.6'
                },{
                    name:'番茄配方',
                    EC:'1.21',
                    PH:'5.6'
                },{
                    name:'番茄配方',
                    EC:'1.21',
                    PH:'5.6'
                },{
                    name:'番茄配方',
                    EC:'1.21',
                    PH:'5.6'
                },{
                    name:'番茄配方',
                    EC:'1.21',
                    PH:'5.6'
                }],
                fatWaterTankText:[{
                    title:'畜肥罐1',
                    id:1,
                    state:'手动施肥',
                    value:[{
                        title:'EC',
                        value:'1.21',
                        id:123
                    },{
                        title:'液位',
                        value:'1.2m',
                        id:456
                    },{
                        title:'PH',
                        value:'5.6',
                        id:421
                    }]
                },{
                    title:'畜肥罐1',
                    id:1,
                    state:'停止施肥',
                    value:[{
                        title:'EC',
                        value:'1.21',
                        id:123
                    },{
                        title:'液位',
                        value:'1.2m',
                        id:456
                    },{
                        title:'PH',
                        value:'5.6',
                        id:421
                    }]
                },{
                    title:'畜肥罐1',
                    id:1,
                    state:'自动施肥',
                    value:[{
                        title:'EC',
                        value:'1.21',
                        id:123
                    },{
                        title:'液位',
                        value:'1.2m',
                        id:456
                    },{
                        title:'PH',
                        value:'5.6',
                        id:421
                    }]
                },{
                    title:'畜肥罐1',
                    id:1,
                    state:'自动施肥',
                    value:[{
                        title:'EC',
                        value:'1.21',
                        id:123
                    },{
                        title:'液位',
                        value:'1.2m',
                        id:456
                    },{
                        title:'PH',
                        value:'5.6',
                        id:421
                    }]
                }],
                fertilizeTextType:[{
                    title:'设定值',
                    value:[{
                        EC:'1.21',
                        PH:'5.6'
                    }]
                },{
                    title:'输出值',
                    value:[{
                        EC:'1.21',
                        PH:'5.6'
                    },{
                        EC:'1.21',
                        PH:'5.6'
                    }]
                }],
                fertilizeWarningText:[{
                    text:'EC和目标值偏差过大',
                    id:1
                },{
                    text:'混肥桶液位低',
                    id:2
                },{
                    text:'混肥桶液位低',
                    id:3
                }],
                motherLiquorText:[{
                    id: 'A',
                    EC: '12',
                    PH: '2'
                },{
                    id: 'B',
                    EC: '12',
                    PH: '2'
                },{
                    id: 'C',
                    EC: '12',
                    PH: '2'
                },{
                    id: 'D',
                    EC: '12',
                    PH: '2'
                },{
                    id: 'E',
                    EC: '12',
                    PH: '2'
                },{
                    id: 'F',
                    EC: '12',
                    PH: '2'
                },{
                    id: 'G',
                    EC: '12',
                    PH: '2'
                },{
                    id: 'H',
                    EC: '12',
                    PH: '2'
                },{
                    id: 'J',
                    EC: '12',
                    PH: '2'
                },{
                    id: 'L',
                    EC: '12',
                    PH: '2'
                }],
                waterTankText:[{
                    title:'EC',
                    value:'1.21',
                    id:1
                },{
                    title:'液位',
                    value:'1.2m',
                    id:2
                },{
                    title:'PH',
                    value:'5.6',
                    id:3
                }],
                returnWaterTankText:[{
                    title:'EC',
                    value:'1.21',
                    id:1
                },{
                    title:'液位',
                    value:'1.2m',
                    id:2
                },{
                    title:'PH',
                    value:'5.6',
                    id:3
                }],
                mixingText:[{
                        title:'开度比例',
                        value:'3:7',
                        id:1
                    },{
                        title:'EC输出值',
                        value:'1.2',
                        id:2
                    },{
                        title:'EC设定值',
                        value:'1.4',
                        id:3
                    }]
            }
        },
        computed: {

        },
        created() {

        },
        mounted(){

        },
        methods:{
            formulationSettingAddBtn(){

            },
            formulationSettingEditBtn(){

            },
            mixingEditBtn(){

            }
        }
    })
</script>
<script src="../js/index.js"></script>